/**
 * @Method VeFormBuilder
 * @Description TODO
 * @Date 2021/1/20 11:14
 * @Created by HePing
 */
import mixins from './mixins'

export default {
  name: 'VeFormBuilder',
  mixins: [mixins],
  methods: {
    renderNodes(nodeList) {
      if (!nodeList || !nodeList.length) return
      const vm = this
      let node
      let colspan
      return nodeList.map(row => {
        if (row.hidden) return ''
        const { col, item, widget, subWidgets } = row
        const { tagType, virtualTag, virtualField, on = {} } = widget
        if (tagType === 'PANEL') {
          node = <ve-component tag={virtualTag} v-model={vm.formData[virtualField]} config={row} on={vm._on({ on, virtualField })}>
            <el-row gutter={vm.formProps.gutter} type='flex' style='flex-wrap:wrap'>
              {subWidgets.length ? vm.renderNodes(subWidgets) : ''}
            </el-row>
          </ve-component>
        } else if (tagType === 'CUSTOM') {
          colspan = col.span
          node = <ve-component tag={virtualTag} v-model={vm.formData[virtualField]} config={row} on={vm._on({ on, virtualField })} />
        } else {
          colspan = col.span
          node = <el-form-item label={item.label} labelWidth={item.labelWidth} prop={virtualField}>
            <ve-component tag={virtualTag} v-model={vm.formData[virtualField]} config={row} on={vm._on({ on, virtualField })} />
          </el-form-item>
        }
        return <el-col span={colspan} style={col.style}>{node}</el-col>
      })
    }
  },
  render(h) {
    const { formData, formProps: { gutter }, config, elements } = this
    return <ve-form v-model={formData} config={{ ...config, rules: this.rules }}>
      <el-row gutter={gutter} type='flex' style='flex-wrap:wrap'>
        {this.renderNodes(elements)}
      </el-row>
    </ve-form>
  }
}
